<template>
  <div>
    <el-select 
        v-model="areaId" 
        ref="selectRef"
        placeholder="请选择" 
        @focus="salesRegionFocus($event)"
        @change="salesRegionChange($event)">
         <template #header>
          <div>
            常用：
            <span class="cursor-pointer text-[#3721FF] inline-block" 
              v-for="(itm,idx) in commonlyUsed" 
              :key="idx" 
              @click="commonlyUsedChange(itm)"
              >
              {{itm.label}}{{idx == commonlyUsed.length-1 ? '' : '、'}}
            </span>
          </div>
        </template>
      <el-option
        v-for="(item,index) in salesRegionList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">
        <Icon :icon="'material-symbols:kid-star-outline'" @click.stop="handleStatus(item,index)" v-if="!item.isSelectStatus"/>
        <Icon :icon="'material-symbols:kid-star'"  @click.stop="handleStatus(item,index)" v-if="item.isSelectStatus" color="#3721FF"/>
      </span>
      </el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { deepCopy,throttle } from '@/utils'
import {GlobeStateHarvestApi} from "@/api/address";
  const selectRef = ref()
  const props = defineProps(['salesRegion'])
  const emit = defineEmits(['update:focus','update:change'])
  const areaId = ref('')
  const salesRegionList = ref([])
  const commonlyUsed = ref([])
  // 选择常用
  const commonlyUsedChange = (item: any) => {
    console.log(item,'item8989');
    areaId.value = item.value // 设置选中值
    salesRegionChange(item.value) // 触发change事件
    selectRef.value.blur() // 关闭下拉框
  }
  const salesRegionChange = (value: any) => {
    emit('update:change', value)
  }
  const salesRegionFocus = async (value: any) => {
    await getCommonlyUsedList()
    if(commonlyUsed.value.length>0){
      salesRegionList.value = props.salesRegion.map((item: any) => {
        return {
          ...item,
          isSelectStatus: commonlyUsed.value.some((itm:any)=>itm.value==item.value),
        }
      })
    }else{
      salesRegionList.value = props.salesRegion.map((item: any) => {
        return {
          ...item,
          isSelectStatus: false
        }
      })
    }
    
    emit('update:focus', value)
  }
  const handleStatus = throttle((item,index) => {    
    if(salesRegionList.value[index]?.isSelectStatus){
      let oldsalesRegions = deepCopy(salesRegionList.value)
      item.isSelectStatus = !item.isSelectStatus //改变页面状态
      oldsalesRegions[index].isSelectStatus = !oldsalesRegions[index].isSelectStatus // 改变数据状态
      salesRegionList.value =  oldsalesRegions
      commonlyUsed.value = salesRegionList.value.filter((it=>it.isSelectStatus==true))
      GlobeStateHarvestApi.deleteGlobeStateCollection(salesRegionList.value[index]?.value).then((res:any)=>{
      ElMessage.success('取消常用')
      }).catch((err:any)=>{
        console.log(err)
        ElMessage.error('取消常用失败')
      })
    }else{
      if(commonlyUsed.value.length>=5){
        ElMessage.error('最多只能添加五个')
        return
      }      
      let oldsalesRegions = deepCopy(salesRegionList.value)
      item.isSelectStatus = !item.isSelectStatus//改变页面状态
      oldsalesRegions[index].isSelectStatus = !oldsalesRegions[index].isSelectStatus// 改变数据状态
      salesRegionList.value =  oldsalesRegions
      commonlyUsed.value = salesRegionList.value.filter((it=>it.isSelectStatus==true))
      GlobeStateHarvestApi.addGlobeStateCollection({areaId:salesRegionList.value[index].value}).then((res:any)=>{
        ElMessage.success('添加成功')
      }).catch((err:any)=>{
        console.log(err)
        ElMessage.error('添加失败')
      })
    }
    console.log('handleStatus',salesRegionList.value)
    console.log('handleStatus',salesRegionList.value)
  },1000)
  const getCommonlyUsedList = async() => {
   await GlobeStateHarvestApi.getGlobeStateCollection({pageSize:10,pageNum:1}).then((res:any)=>{
      commonlyUsed.value = res.list.map((item:any)=>{
        return {
          label:item.stateName,
          value:item.areaId,
          collId:item.collId
        }
      })
    })
  }
  onMounted(async() => {
   await getCommonlyUsedList()
    if(commonlyUsed.value.length>0){
      salesRegionList.value = props.salesRegion.map((item: any) => {
        return {
          ...item,
          isSelectStatus: commonlyUsed.value.some((itm:any)=>itm.value==item.value),
        }
      })
      console.log(salesRegionList.value,'salesRegionList.value6666');
      
    }else{
      salesRegionList.value = props.salesRegion.map((item: any) => {
        return {
          ...item,
          isSelectStatus: false
        }
      })
    }
  })
  watch(() => props.salesRegion, (newVal) => {
    // salesRegionList.value = newVal.map((item: any) => {
    //   return {
    //     ...item,
    //   }
    // })
  })
</script>

<style scoped>

</style>